<template>
  <div class="cartcontent">
    <!-- 1.0 购物车标题 -->
    <div class="cart-title">
      <span>购物车</span>
      <span class="clear" @click="clearCart">清空</span>
    </div>

    <!-- 2.0 购物车清单 -->
    <div class="content">
      <ul>
        <li
          v-for="(food, index) in getCart"
          :key="index"
          class="content-item"
          v-show="food.count > 0"
        >
          <span class="name">{{ food.name }}</span>
          <div class="content-right">
            <span class="price">￥{{ food.price * food.count }}</span>
            <cartcontrol :food="food" class="cartcontrol" />
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import cartcontrol from "../ShopCart/cartcontrol";
export default {
  name: "cartcontent",
  props: ["showContent"],
  components: {
    cartcontrol,
  },
  data() {
    return {
      food: [],
    };
  },
  methods: {
    // 清空购物车
    clearCart() {
      //this.cart.splice(0, this.cart.length);
      this.$store.dispatch("aClearCart");
      this.showCartContent();
    },
    showCartContent() {
       this.$emit('showCartContent');
    },
  },
  computed: {
    // getFoodPrice(){
    //   let state = this.$store.state;
    //   state.cart.forEach(item => {
    //     if(item.name === this.food.name)
    //       return item.price * item.count;
    //   });
    // },
    getCart() {
      return this.$store.state.cart;
    },
  },
};
</script>

<style lang="scss" scoped>
.cartcontent {
  position: fixed;
  z-index:-1;
  left: 0;
  bottom: 48px;
  width: 100%;
  background: #fff;
  .cart-title {
    padding: 0 18px;
    height: 40px;
    background: #f3f5f7;
    font-weight: 200;
    line-height: 40px;
    color: eleblack(1);
    font-size: 14px;
    border-bottom: 1px solid eleblack(0.1);
    .clear {
      display: inline-block;
      position: absolute;
      right: 18px;
      color: $e-dblue;
    }
  }
  .content {
    .content-item {
      display: flex;
      height: 48px;
      margin: 0 18px;
      padding: 12px 0;
      border-bottom: 1px solid eleblack(0.1);
      background: #fff;
      vertical-align: middle;
      box-sizing: border-box;
      position: relative;
      &:last-child {
        margin-bottom: 16px;
      }
      .name {
        flex: 2;
        display: inline-block;
        font-size: $md-size;
        color: eleblack(1);
        line-height: 24px;
      }
      .content-right {
        display: inline-block;
        position: absolute;
        right: 0px;
        .price {
          display: inline-block;
          color: $e-red;
          font-weight: 700;
          margin-right: 12px;
          line-height: 24px;
          vertical-align: top;
        }
        .cartcontrol {
          display: inline-block;
        }
      }
    }
  }
}
</style>